1 00:00:00,990 --> 00:00:01,550 All right. 2 00:00:01,560 --> 00:00:10,650 So welcome back for the second part of writing the drawing logic on our web application. 3 00:00:10,650 --> 00:00:17,250 The goal of this lesson really is to make sure that we only draw when we're actually clicking and dragging 4 00:00:17,280 --> 00:00:19,850 rather than we're just mousing over the canvas. 5 00:00:20,070 --> 00:00:25,650 So we only want to draw when the mouse button is held down and there's actually three other things we're 6 00:00:25,650 --> 00:00:27,590 gonna cover in this lesson as well. 7 00:00:27,630 --> 00:00:32,350 We're going to cover how to respond to touch events for tablets and phones. 8 00:00:32,370 --> 00:00:38,640 We're going to introduce the programing concept of scope in JavaScript and we're also gonna learn how 9 00:00:38,640 --> 00:00:43,020 to refactor and reorganize code in this code. 10 00:00:43,020 --> 00:00:47,920 So to start this lesson off I'd like to pose a challenge to you. 11 00:00:48,090 --> 00:00:53,540 I'd like you to implement the following functionality on this Web site. 12 00:00:53,560 --> 00:00:55,940 Here's the behavior that I'm looking for. 13 00:00:55,980 --> 00:01:04,170 By the time that you've finished the challenge you should be able to click and drag on the canvas in 14 00:01:04,170 --> 00:01:10,560 order to draw and in the console over here you should be able to see mouse pressed when you push the 15 00:01:10,560 --> 00:01:18,520 button down and you should be able to see mouse released when you lift your finger off the mouse button. 16 00:01:18,540 --> 00:01:22,380 So this is what we're after for this challenge. 17 00:01:22,410 --> 00:01:26,370 So in order to complete this challenge you're going to have to do three things. 18 00:01:26,610 --> 00:01:30,810 First you can have to listen for one more mouse event in your code. 19 00:01:30,810 --> 00:01:37,590 So I recommend you pull up the documentation from NBN or W3 schools to check what mouse event that could 20 00:01:37,590 --> 00:01:39,560 be second. 21 00:01:39,590 --> 00:01:43,640 You're also going into a way of tracking the state of the Web site. 22 00:01:43,640 --> 00:01:48,660 Meaning is the button currently being pressed or is it not currently being pressed. 23 00:01:48,720 --> 00:01:52,840 So you're gonna have to add some code around that in order to track that. 24 00:01:52,880 --> 00:01:58,510 And thirdly you're going to have to change the code inside mouse down a little bit in order to get that 25 00:01:58,510 --> 00:02:00,810 the behavior that we're looking for. 26 00:02:01,160 --> 00:02:04,790 But I'm gonna do is I'm gonna give you a couple of seconds to pause the video and give this a go. 27 00:02:05,390 --> 00:02:10,880 But if you're unsure because this is a bit more of a complex challenge I'm going to give you two hints. 28 00:02:10,880 --> 00:02:15,710 So I'm going to give you the first hint after a couple of seconds and then will give you the second 29 00:02:15,710 --> 00:02:16,100 hand. 30 00:02:16,400 --> 00:02:19,830 After a couple of further seconds so positive. 31 00:02:19,870 --> 00:02:23,060 Now if you want to tackle the challenge without any of the hints 32 00:02:25,950 --> 00:02:28,320 so here's hint number one. 33 00:02:28,350 --> 00:02:32,760 The event that you're looking for is called mouse up. 34 00:02:32,760 --> 00:02:34,910 It's this one right here. 35 00:02:34,980 --> 00:02:37,880 Now pause the video and see if you can complete the challenge. 36 00:02:40,960 --> 00:02:46,690 The second hint I'm gonna give you is you're gonna have to create a variable to track if the mouse has 37 00:02:46,690 --> 00:02:53,360 been pressed so I'm going to create a variable here and I'm going to call it is painting and I'm going 38 00:02:53,370 --> 00:02:54,730 to store a boolean in here. 39 00:02:55,090 --> 00:02:57,740 And I'm simply going to store false. 40 00:02:58,210 --> 00:03:00,350 Of course you can use any name that you'd like. 41 00:03:00,550 --> 00:03:07,630 But the important thing is that you're going to change the value of this variable depending on the mouse 42 00:03:07,630 --> 00:03:07,990 events 43 00:03:11,220 --> 00:03:11,710 all right. 44 00:03:11,820 --> 00:03:14,040 So here's the solution. 45 00:03:14,040 --> 00:03:20,730 The first thing I'm going to do is I'm going to add that second mass event and I'm simply going to copy 46 00:03:20,760 --> 00:03:22,160 this line of code here actually. 47 00:03:22,680 --> 00:03:30,840 And when I come down here and I'm going to add the mass event just above this curly brace and it's not 48 00:03:30,840 --> 00:03:31,860 gonna be mass down. 49 00:03:31,860 --> 00:03:40,140 It's gonna be a mouse up and I want to change the console log message here to mouse released. 50 00:03:40,140 --> 00:03:46,980 And when the mouse has been released then is painting should be equal to False. 51 00:03:46,980 --> 00:03:51,540 So I'm gonna make sure that the variable that I'm using to track whether the mouse is being pressed 52 00:03:51,600 --> 00:03:55,620 is set to false when the button is released. 53 00:03:55,620 --> 00:03:59,460 So when should is painting be equal to true. 54 00:03:59,460 --> 00:04:05,220 Well of course when the mouse has been pressed down when the button has been pressed down it's in this 55 00:04:05,220 --> 00:04:08,920 case that is painting should be equal to true. 56 00:04:08,940 --> 00:04:14,130 So now we're able to track whether the mouse is being dragged or not. 57 00:04:14,250 --> 00:04:20,260 I'm also gonna change the console log message here to mouse pressed. 58 00:04:20,640 --> 00:04:28,020 Now that we're tracking whether or not we are dragging the mouse we can check against is painting to 59 00:04:28,020 --> 00:04:30,920 see whether we should draw something inside. 60 00:04:31,050 --> 00:04:32,720 Mouse move. 61 00:04:32,790 --> 00:04:39,830 So what we want to do is we only want to execute these lines of code as long as his painting is true. 62 00:04:39,870 --> 00:04:42,670 So if is painting. 63 00:04:43,110 --> 00:04:51,750 So if true then execute these lines of code it's going to move these up here and then what I'll do is 64 00:04:51,750 --> 00:04:58,510 I'm going to reinvent my code so I'm going to right click here and I'm going to format my document. 65 00:04:58,530 --> 00:05:03,000 So if you're right clicking as well then check with the keyboard shortcut is here because you're probably 66 00:05:03,000 --> 00:05:05,490 gonna be using it quite often. 67 00:05:05,490 --> 00:05:12,000 So for me it's the option key shift and F but if you're in Windows just check what it is that you see 68 00:05:12,000 --> 00:05:13,120 here. 69 00:05:13,170 --> 00:05:13,500 All right. 70 00:05:13,500 --> 00:05:14,330 Perfect. 71 00:05:14,340 --> 00:05:15,650 So let's test this out. 72 00:05:15,690 --> 00:05:21,990 Let's save our progress head back into chrome and let's refresh our site. 73 00:05:22,830 --> 00:05:27,010 So I'm going to refresh and then I'm going to try and clicking and dragging. 74 00:05:27,210 --> 00:05:31,380 But what I'm seeing here is that nothing has changed. 75 00:05:31,380 --> 00:05:33,610 Nothing has changed at all. 76 00:05:33,630 --> 00:05:34,350 So what's going on. 77 00:05:35,040 --> 00:05:39,320 Well maybe I'm actually still getting the old version of my web site. 78 00:05:39,420 --> 00:05:45,630 So one of the things you might have to do is you might have to actually clear your cache so in Chrome 79 00:05:46,020 --> 00:05:51,200 go to the overflow menu and more tools and go to where it says clear browsing data. 80 00:05:51,570 --> 00:05:58,800 And I'm just gonna clear the last 24 hours and then I'm going to refresh and then my changes have been 81 00:05:58,800 --> 00:05:59,880 applied. 82 00:05:59,880 --> 00:06:02,190 So this is a good thing to be aware of. 83 00:06:02,190 --> 00:06:08,820 You can get very very confused by chrome just giving you the previous version of your Web site and not 84 00:06:08,820 --> 00:06:10,570 really reflecting the changes. 85 00:06:10,590 --> 00:06:12,630 So this is a good one to remember. 86 00:06:12,870 --> 00:06:18,910 If you get some unexpected behavior just clear your browsing data and refresh the site again. 87 00:06:18,930 --> 00:06:19,200 All right. 88 00:06:19,620 --> 00:06:20,790 So clicking and dragging. 89 00:06:20,790 --> 00:06:21,060 Right. 90 00:06:21,480 --> 00:06:22,860 This is where we're at. 91 00:06:22,980 --> 00:06:28,030 If I click in the middle of my canvas I press my mouse and I move. 92 00:06:28,170 --> 00:06:31,570 Then I get this line up here from the top left corner. 93 00:06:31,740 --> 00:06:37,960 And if I let go and then press again and I move I get a line appearing between the point I was last 94 00:06:37,960 --> 00:06:39,520 at and where I clicked. 95 00:06:40,260 --> 00:06:44,810 So why is this why is their connecting line coming in from the top left. 96 00:06:44,850 --> 00:06:51,760 When I first click somewhere on my canvas Well this all has to do with the initial values of the current 97 00:06:51,760 --> 00:06:58,900 X and the current Y when we click down and we move our mouse we're essentially grabbing the top left 98 00:06:58,900 --> 00:07:03,270 corner and we're drawing a line to where our mouse has moved to. 99 00:07:03,280 --> 00:07:07,870 So obviously we need to think very carefully about what the starting values for these two variables 100 00:07:07,870 --> 00:07:14,890 should be and the place that we would ideally set this in order to avoid the strange behavior is when 101 00:07:14,890 --> 00:07:21,660 we first press our mouse down it's here that we actually want to execute this line of code. 102 00:07:22,110 --> 00:07:24,520 And this line of code. 103 00:07:24,750 --> 00:07:29,640 So the current X and the current Y should be set to the coordinates of where we've actually clicked 104 00:07:29,640 --> 00:07:31,270 with our mouse. 105 00:07:31,320 --> 00:07:38,200 Let me save our changes head back into chrome refresh and just check whether this hypothesis is true. 106 00:07:38,220 --> 00:07:43,890 So I'm going to click again somewhere on my canvas and the behavior is now what you would expect it 107 00:07:43,890 --> 00:07:44,660 to be. 108 00:07:44,790 --> 00:07:47,280 And that completes the first challenge. 109 00:07:47,370 --> 00:07:53,880 So well done if you were able to solve it without the hints but no worries if you needed a couple of 110 00:07:53,880 --> 00:07:56,050 hints to help you along the way. 111 00:07:56,160 --> 00:08:03,180 JavaScript is something that's new after all but I think this is a good point to actually try and solve 112 00:08:03,180 --> 00:08:09,800 another challenge namely how do we stop the mouse drawing when it leaves the canvas. 113 00:08:09,810 --> 00:08:11,820 Here's what I mean at the moment. 114 00:08:11,940 --> 00:08:18,600 If I click down and I move my mouse off the canvas and I come back then I'm still drawing. 115 00:08:18,630 --> 00:08:21,080 As long as I'm still dragging my mouse. 116 00:08:21,210 --> 00:08:27,040 Right now the behavior that I'm challenging you to implement would be something more like this. 117 00:08:27,090 --> 00:08:31,870 You click down and if you don't release it stops drawing. 118 00:08:31,920 --> 00:08:37,540 So as soon as you move off the canvas I'd like the drawing behavior to stop. 119 00:08:37,650 --> 00:08:41,880 I'll give you a few seconds to pause the video and try and implement this for yourself 120 00:08:44,580 --> 00:08:44,950 ready. 121 00:08:45,330 --> 00:08:46,860 Here's the solution. 122 00:08:46,860 --> 00:08:53,580 So if we look at the MDA documentation we see there is one event here called Mouse leave and the description 123 00:08:53,580 --> 00:09:00,060 is a pointing device is moved off the element that has the listener attached. 124 00:09:00,060 --> 00:09:01,440 So what does this mean. 125 00:09:01,440 --> 00:09:05,220 Well let's take a look at the documentation for attaching a listener. 126 00:09:05,820 --> 00:09:09,230 So this is the page on adding an event listener from MGM. 127 00:09:10,110 --> 00:09:14,550 And what we see here is that the syntax looks something like this. 128 00:09:14,550 --> 00:09:20,570 We have a target and then we have a dot and then we have add event listener. 129 00:09:20,640 --> 00:09:22,740 So what's the target that we've been using so far. 130 00:09:23,760 --> 00:09:30,000 If we look at this code we can see that our target was the entire Web site it was the entire document. 131 00:09:30,090 --> 00:09:38,010 But if we want to get the behavior that monitors whether we leave the canvas what do you think the target 132 00:09:38,010 --> 00:09:39,330 should be. 133 00:09:39,330 --> 00:09:41,270 Well it should be the canvas right. 134 00:09:41,310 --> 00:09:42,650 So let's implement this. 135 00:09:42,710 --> 00:09:46,300 I'm going to come down here and I'm going to copy this bit of code here. 136 00:09:46,980 --> 00:09:49,080 And I'm just going to paste it below. 137 00:09:49,130 --> 00:09:53,130 I want to change it from document to canvas. 138 00:09:53,130 --> 00:10:01,350 And I'm also going to change the mouse event from mouse up to mouse leave and delete this console log 139 00:10:01,350 --> 00:10:02,210 statement here. 140 00:10:02,400 --> 00:10:04,340 But I'm going to leave this line. 141 00:10:04,440 --> 00:10:10,260 I'm going to leave his painting is equal to False because what this will do is we'll make sure that 142 00:10:10,260 --> 00:10:11,820 we can no longer draw. 143 00:10:11,820 --> 00:10:14,670 Once we have left the canvas with our pointer. 144 00:10:15,480 --> 00:10:17,330 So let's see if this indeed works. 145 00:10:17,340 --> 00:10:18,670 I'm going to save my changes. 146 00:10:18,810 --> 00:10:28,240 Come back here and refresh my site once again and when I click and drag and a move off the canvas and 147 00:10:28,320 --> 00:10:32,120 I come back and voila no more painting. 148 00:10:32,120 --> 00:10:39,440 So this indeed works the reason I wanted to show you this is because you can actually attach an event 149 00:10:39,440 --> 00:10:41,650 listener to any number of targets. 150 00:10:41,930 --> 00:10:43,530 It could be the document as a whole. 151 00:10:43,610 --> 00:10:47,520 It could be the canvas or it could be our button. 152 00:10:47,540 --> 00:10:48,400 Right. 153 00:10:48,440 --> 00:10:54,860 In fact let's go ahead and attach an event listener to our button and we actually gonna do this in the 154 00:10:54,860 --> 00:10:56,840 index thought each time El file. 155 00:10:56,840 --> 00:11:03,170 So down here where I've got my script I'm going to add a listener to our button. 156 00:11:03,740 --> 00:11:05,880 So first I'm gonna have to get hold of my button. 157 00:11:06,020 --> 00:11:10,040 It's gonna be document and then get element by I.D.. 158 00:11:10,790 --> 00:11:13,240 And what's the idea of the button. 159 00:11:13,250 --> 00:11:15,760 Well I'm gonna go up here and just check what it is. 160 00:11:15,770 --> 00:11:20,540 So I've got my button here and it has the I.D. check answer. 161 00:11:20,630 --> 00:11:27,380 So that's the idea I'm going to supply its check answer and everything's case sensitive. 162 00:11:27,380 --> 00:11:30,220 And it has to be spelled exactly the same of course. 163 00:11:31,170 --> 00:11:36,320 And once I've got my button here I can then add an event listener. 164 00:11:37,580 --> 00:11:39,620 So what event am I going to listen for. 165 00:11:39,680 --> 00:11:47,150 On my button I'm going to listen for so-called click events and what do I want to happen once I click 166 00:11:47,150 --> 00:11:47,670 on the button. 167 00:11:48,620 --> 00:11:54,950 So what I'm thinking is we should follow through to the last step of working with the canvas namely 168 00:11:55,160 --> 00:11:58,550 clearing it resetting it for the next number that we're going to draw. 169 00:11:59,270 --> 00:12:02,860 So when I had my callback function here that's going to be a function. 170 00:12:02,990 --> 00:12:04,530 And it's not going to have a name. 171 00:12:04,670 --> 00:12:12,890 And it's also not going to have any parameters but what it will do is it will clear the canvas. 172 00:12:12,980 --> 00:12:15,070 So how we're gonna do that. 173 00:12:15,170 --> 00:12:17,110 So how we're gonna do that. 174 00:12:17,210 --> 00:12:22,930 Well let's call a function called Clear canvas and the semicolon at the end. 175 00:12:23,030 --> 00:12:25,990 Now clear canvas actually doesn't exist yet. 176 00:12:26,240 --> 00:12:33,710 I've added it here but we still have to create it and I'm going to create clear canvas inside the drawing 177 00:12:33,730 --> 00:12:34,070 Dot. 178 00:12:34,110 --> 00:12:35,410 J ust file. 179 00:12:35,780 --> 00:12:41,170 Let me scroll up and just click the minus sign here to collapse prepare canvas. 180 00:12:41,180 --> 00:12:48,530 And when I want to do is blow the closing curly brace of prepared canvas I'm going to add this function 181 00:12:49,070 --> 00:12:55,250 clear canvas so function keyword and then a clear canvas and the name of the function here. 182 00:12:55,250 --> 00:12:59,190 And the spelling has to match what I'm using here. 183 00:12:59,210 --> 00:13:03,470 So clear canvas has to be spelled exactly the same as this one right write. 184 00:13:04,070 --> 00:13:10,170 And it's gonna be the job of this function to reset everything we have on the drawing front. 185 00:13:10,220 --> 00:13:11,150 So what does that involve. 186 00:13:11,900 --> 00:13:15,210 Well we're gonna have to reset two things. 187 00:13:15,350 --> 00:13:21,230 We're gonna have to make the canvas black again but we should also reset the coordinates that we've 188 00:13:21,230 --> 00:13:22,070 been tracking. 189 00:13:22,070 --> 00:13:23,120 So the current x. 190 00:13:23,120 --> 00:13:25,010 The current Y and so on. 191 00:13:25,010 --> 00:13:29,610 So when I take these guys up here and copy them paste them below. 192 00:13:29,900 --> 00:13:35,220 And then what I'll do is I'm going to delete the keyword here because we're reusing them we're not going 193 00:13:35,250 --> 00:13:37,040 to create them. 194 00:13:37,040 --> 00:13:40,600 And I want to format my code so that it's indented properly. 195 00:13:40,730 --> 00:13:47,720 And now what I've got is I've got four lines of code that are resetting these variables to their starting 196 00:13:47,720 --> 00:13:49,230 values namely zero. 197 00:13:49,940 --> 00:13:57,070 So that's step one step two is going to be making this canvas all black. 198 00:13:57,080 --> 00:13:58,870 How do we do that in prepare candidates. 199 00:13:58,870 --> 00:14:01,570 How do we make it all black. 200 00:14:01,580 --> 00:14:03,220 We used this line of code right here. 201 00:14:03,260 --> 00:14:03,690 Right. 202 00:14:03,710 --> 00:14:10,880 Context thought Phil rect and then we provided the width and the height of the canvas to fill the entire 203 00:14:10,880 --> 00:14:13,530 canvas with it's background color. 204 00:14:14,480 --> 00:14:16,990 So let's try and copy this line here. 205 00:14:17,350 --> 00:14:20,460 Paste it inside clear canvas. 206 00:14:20,570 --> 00:14:29,910 So right here and then we can try and save our changes and see if this will work on our site. 207 00:14:29,930 --> 00:14:37,640 So when I refresh and then when I click here draw something and then I'm gonna press the mouse button 208 00:14:38,970 --> 00:14:40,590 what's going on. 209 00:14:40,590 --> 00:14:41,160 Let's check. 210 00:14:41,530 --> 00:14:41,910 OK. 211 00:14:41,940 --> 00:14:48,260 So I've saved my changes in this file but I haven't saved my changes in the index that each terminal. 212 00:14:48,300 --> 00:14:49,670 You still see that circle over here. 213 00:14:50,160 --> 00:14:55,440 So I'm actually not getting any code being executed when I press the button. 214 00:14:55,440 --> 00:14:59,340 So my save the changes here and then I'm going to try again. 215 00:14:59,340 --> 00:15:00,170 I'm going to come back. 216 00:15:00,270 --> 00:15:07,450 I'm going to refresh and I'm going to click here draw something and then press the button. 217 00:15:07,770 --> 00:15:10,460 And what happens at this point we get an error. 218 00:15:10,530 --> 00:15:19,710 It says on caught reference error context is not defined at Clear canvas on line number 17. 219 00:15:19,710 --> 00:15:25,160 So in this code if we look down here we go to the drawing not just file. 220 00:15:25,200 --> 00:15:29,660 We look at line number 70 and it's complaining about this line. 221 00:15:29,720 --> 00:15:32,950 It's saying that the context is not defined. 222 00:15:33,000 --> 00:15:36,220 So this thing isn't defined as no context is. 223 00:15:36,300 --> 00:15:37,250 So why not. 224 00:15:37,350 --> 00:15:39,040 We've created a context right. 225 00:15:39,060 --> 00:15:40,260 It's right here. 226 00:15:40,290 --> 00:15:41,530 So what's going on. 227 00:15:41,700 --> 00:15:47,700 Why is it that it has a problem with context but it doesn't have a problem with the current Y or the 228 00:15:47,700 --> 00:15:48,820 current X.. 229 00:15:49,050 --> 00:15:50,260 Why are these fine. 230 00:15:50,310 --> 00:15:56,890 And this is not well let's collapse this function and let's collapse this function. 231 00:15:56,940 --> 00:16:03,990 So what we see at this point is that we've got current X and current Y being defined outside of prepared 232 00:16:03,990 --> 00:16:05,100 canvas. 233 00:16:05,100 --> 00:16:11,220 So that means that we can access them inside clear canvas on the other hand. 234 00:16:11,250 --> 00:16:16,830 The context was declared inside prepare a canvas with this constant keyword. 235 00:16:16,890 --> 00:16:25,740 And what this means is that we can only access the context inside of prepare canvas in programming. 236 00:16:25,740 --> 00:16:30,250 This has to do with something called scope but what does that mean. 237 00:16:30,540 --> 00:16:38,900 Well the scope for these variables here is the entire file the entire drawing not just file. 238 00:16:38,910 --> 00:16:48,710 We can use them anywhere inside but the scope for the context is only this prepare a canvas function. 239 00:16:48,810 --> 00:16:53,490 In other words const context is a local variable. 240 00:16:53,490 --> 00:17:02,400 It's local to prepare a canvas and var current ex up here is a global variable. 241 00:17:02,550 --> 00:17:07,110 It is accessible in the entire file. 242 00:17:07,110 --> 00:17:13,570 So what if we actually want to use the context and the canvas inside clear canvas. 243 00:17:13,830 --> 00:17:17,310 Well we can try and promote these two guys. 244 00:17:17,310 --> 00:17:23,940 We can make canvas in context global just like the current ex and the current Y. 245 00:17:23,970 --> 00:17:25,720 So how would we do that. 246 00:17:25,740 --> 00:17:33,010 Well we can create a canvas here and we can create a context here. 247 00:17:33,060 --> 00:17:34,820 So I've created two variables. 248 00:17:34,890 --> 00:17:40,860 They're global because they're outside of prepare canvas on the same hierarchy as my other variables 249 00:17:40,860 --> 00:17:41,190 appear. 250 00:17:41,910 --> 00:17:45,560 And what I want to do is inside prepare canvas. 251 00:17:45,850 --> 00:17:49,280 I'm going to delete my keyword cons too. 252 00:17:49,400 --> 00:17:56,790 And what this does is it will take the existing canvas that I've got him and it's at this point where 253 00:17:57,000 --> 00:17:58,490 it gets a value. 254 00:17:58,530 --> 00:18:04,500 So initially the canvas is empty and then we're storing the canvas that we're getting from the document 255 00:18:04,950 --> 00:18:11,880 inside this variable on line 15 and just below the context which previously didn't have a value gets 256 00:18:11,880 --> 00:18:16,140 his value from the canvas with get context. 257 00:18:16,140 --> 00:18:22,470 So let's save these changes and head into chrome and refresh and let's see if we get the same error 258 00:18:22,500 --> 00:18:23,840 again. 259 00:18:23,840 --> 00:18:29,650 So I want to draw something here and then press the button and behold there is no error. 260 00:18:29,820 --> 00:18:36,480 And also we're successfully filling the canvas with the background color so we're erasing all that was 261 00:18:36,480 --> 00:18:39,600 drawn on the canvas successfully. 262 00:18:39,600 --> 00:18:40,610 Brilliant. 263 00:18:40,710 --> 00:18:42,480 So we're almost done. 264 00:18:42,630 --> 00:18:47,830 But there's one thing we haven't thought about yet namely does everybody use a mouse when they're gonna 265 00:18:47,850 --> 00:18:50,370 interact with this Web site. 266 00:18:50,370 --> 00:18:52,680 Well not really right. 267 00:18:52,740 --> 00:18:56,110 If you have a phone or tablet you'd use your finger instead. 268 00:18:56,160 --> 00:18:57,820 You wouldn't be using a mouse. 269 00:18:58,050 --> 00:19:03,340 So let's check how our Web site behaves on a phone or a tablet. 270 00:19:03,540 --> 00:19:06,980 The Chrome developer tools can actually help us with this. 271 00:19:06,990 --> 00:19:08,710 So do you see the symbol up here. 272 00:19:08,730 --> 00:19:14,890 It says toggle device toolbar and if you click on it you get to choose a device to simulate. 273 00:19:14,970 --> 00:19:21,780 So at the moment you can see that I've got responsive selected here but here I have a whole choice of 274 00:19:21,780 --> 00:19:24,830 tablets and phones I can use instead. 275 00:19:24,870 --> 00:19:27,640 So let's leave it on responsive for the time being. 276 00:19:27,900 --> 00:19:35,720 And then if we look over here we see this menu says mobile mobile no touch desktop and desktop touch. 277 00:19:35,940 --> 00:19:41,760 If you don't see this menu by the way if you're looks like this then simply go here and say ad device 278 00:19:41,790 --> 00:19:44,220 type then it will appear. 279 00:19:44,220 --> 00:19:45,760 So many select desktop. 280 00:19:45,870 --> 00:19:49,380 And this is the desktop version of our website. 281 00:19:49,410 --> 00:19:54,620 And if I click and draw I have everything working as it should. 282 00:19:54,930 --> 00:20:01,340 But if I select mobile and I try to draw on my canvas. 283 00:20:01,340 --> 00:20:03,190 Nothing happens. 284 00:20:03,200 --> 00:20:06,400 But if I press mobile and say no touch. 285 00:20:06,410 --> 00:20:12,080 So in this case it seems to be working but mobile touch doesn't work. 286 00:20:12,110 --> 00:20:12,760 So why is that. 287 00:20:14,050 --> 00:20:20,790 Why does my canvas not like it when I'm using it on an iPad or on a phone. 288 00:20:20,800 --> 00:20:25,260 The reason is is that if I use it on an iPad I'm not using a mouse. 289 00:20:25,300 --> 00:20:31,600 I'm using my fingers and and that means we're not getting a mouse event. 290 00:20:31,600 --> 00:20:33,670 We're getting a touch event. 291 00:20:33,790 --> 00:20:35,950 The browser will actually make this distinction. 292 00:20:35,990 --> 00:20:39,430 It'll distinguish between mouse events and touch events. 293 00:20:39,820 --> 00:20:43,880 But we should really make our website work on a tablet as well right. 294 00:20:43,900 --> 00:20:48,720 We might want to pull us up on an iPod one day and be able to draw something on this canvas. 295 00:20:48,760 --> 00:20:50,300 So how can we do that. 296 00:20:50,300 --> 00:20:54,230 Well let's check what kind of touch events there are. 297 00:20:54,250 --> 00:21:01,480 So if I go to the MDMA documentation again and a search for touch then I can see that there are in fact 298 00:21:01,840 --> 00:21:09,750 four different kinds of touch events there's touch cancel touch and touch move and touch start. 299 00:21:09,790 --> 00:21:14,580 At this point I'd like to pose a challenge to you again. 300 00:21:14,620 --> 00:21:21,670 Can you use these touch events here to make our website work for the iPod. 301 00:21:21,670 --> 00:21:26,240 Can you make it behave as it should on an iPod using these touch events. 302 00:21:26,260 --> 00:21:30,980 That way everyone can use their fingers to draw into the canvas. 303 00:21:31,000 --> 00:21:36,970 Now the code is going to be very very similar to how you were working with the mouse events before but 304 00:21:36,970 --> 00:21:40,960 there's only going to be one small twist in order to get this working. 305 00:21:40,960 --> 00:21:47,800 Have a google and check stack overflow for the difference in syntax on how to get the touch coordinates 306 00:21:47,860 --> 00:21:50,170 versus the mouse coordinates. 307 00:21:50,170 --> 00:21:52,570 I'll show you the solution in a few seconds. 308 00:21:56,380 --> 00:21:56,700 All right. 309 00:21:57,430 --> 00:21:59,320 So here's the solution. 310 00:21:59,440 --> 00:22:07,150 I'm gonna come down into yes code on the drawing dot j ust file and I'm going to copy this bit of code 311 00:22:07,150 --> 00:22:14,240 here where I'm checking for mouse down and then I'm going to paste it below. 312 00:22:14,390 --> 00:22:21,920 I'm going to add a little comment here with two forward slashes that says touch events and instead of 313 00:22:21,920 --> 00:22:29,330 checking the document I want to check the canvas and instead of checking for mouse down I'm going to 314 00:22:29,330 --> 00:22:38,880 check for touch start and what I'll do is I'm going to log touchdown instead of mouse press. 315 00:22:38,960 --> 00:22:45,290 Now if you did a little bit of research on how to get the coordinates for the finger touching the canvas 316 00:22:45,590 --> 00:22:50,560 you would realize that this isn't going to work. 317 00:22:50,570 --> 00:22:54,060 Instead you have to use a slightly different syntax. 318 00:22:54,110 --> 00:23:01,940 You have to go and get the coordinates via something called a touch scrolling down on the site. 319 00:23:02,000 --> 00:23:08,090 I can see that in order to get the coordinates from a touch you have the event and then you have top 320 00:23:08,120 --> 00:23:14,880 touches and that the square brackets zero and then dot client x. 321 00:23:15,170 --> 00:23:16,340 So why is that. 322 00:23:16,340 --> 00:23:21,080 Why is the syntax different for the mouse events and the touch events. 323 00:23:21,080 --> 00:23:23,650 Well with a mouse you've only got one mouse right. 324 00:23:23,690 --> 00:23:26,620 So there's only one set of coordinates. 325 00:23:26,890 --> 00:23:29,350 But with a touch there's multi touch right. 326 00:23:29,390 --> 00:23:33,640 You can touch the screen with one or two or three or four fingers. 327 00:23:33,740 --> 00:23:40,190 So that means that the touch events actually store the coordinates for the different fingers in something 328 00:23:40,190 --> 00:23:41,060 called an array. 329 00:23:41,150 --> 00:23:45,410 So you get a whole list of coordinates to choose from depending whether it was the first touch or the 330 00:23:45,410 --> 00:23:51,860 second touch of the third touch and the first touch you would always get with the first item in this 331 00:23:51,860 --> 00:23:52,270 list. 332 00:23:52,610 --> 00:24:00,260 So if I just take what it said in the documentation and I write event dot touches square brackets zero 333 00:24:00,740 --> 00:24:06,740 and I get the coordinates for the first touch which is all I care about everybody is gonna draw with 334 00:24:06,800 --> 00:24:15,020 one finger not two or so I'm led to believe and I want to find my current y here as well then I can 335 00:24:15,020 --> 00:24:23,690 try this out on the iPod going to save the changes and I'm going to head back here when I refresh and 336 00:24:23,900 --> 00:24:25,520 then I want to click and drag. 337 00:24:26,030 --> 00:24:31,460 So what am I seeing well I'm seeing this I'm seeing touchdown. 338 00:24:31,580 --> 00:24:37,260 So this means that touch start is working but of course not painting it. 339 00:24:37,400 --> 00:24:43,700 And the reason we're not painting it is because we have to implement the other touch events namely touch 340 00:24:43,700 --> 00:24:48,380 move touch and and touch cancel so let's do that. 341 00:24:48,530 --> 00:24:53,080 Let's take mouse leave and it's pasted below. 342 00:24:53,090 --> 00:25:01,710 And instead of mouse leave Let's go for touch end and let's add the touch cancel as well. 343 00:25:01,940 --> 00:25:04,800 So that leaves touch move. 344 00:25:04,880 --> 00:25:11,150 Well let's come up here where we've got our mouse move because the logic is going to be very very similar. 345 00:25:11,660 --> 00:25:14,850 And I'm going to added below I'm going to add at the bottom. 346 00:25:14,870 --> 00:25:18,470 Once again I want changes to canvas so we're only listening for. 347 00:25:18,470 --> 00:25:26,040 Touch move events on the canvas and then it would have to change this to touch move as per the documentation. 348 00:25:26,270 --> 00:25:31,460 And of course in order to get the coordinates I'm going to have to make sure I get the coordinates for 349 00:25:31,460 --> 00:25:33,660 that first finger touching down. 350 00:25:33,770 --> 00:25:39,860 So for my current ex I'm gonna paste that here and from my current why when a pace that here. 351 00:25:41,000 --> 00:25:47,620 So now it can save the changes head back into my browser refresh and try. 352 00:25:48,050 --> 00:25:49,070 And it works. 353 00:25:49,070 --> 00:25:49,910 Brilliant. 354 00:25:49,910 --> 00:25:55,040 So this is the behavior that we're looking for after the challenge. 355 00:25:55,040 --> 00:25:56,210 Fantastic. 356 00:25:56,210 --> 00:26:02,900 So now our Web site will work on both mobile and on desktop. 357 00:26:02,900 --> 00:26:09,510 You can either draw on this canvas using a mouse or you can draw on this whole thing with your finger. 358 00:26:09,530 --> 00:26:15,680 Let's have a look at our drawing logic one final time what we notice at this point is that we've got 359 00:26:15,890 --> 00:26:19,130 the same code pasted in two different places. 360 00:26:19,220 --> 00:26:24,950 We've got these five lines of code here and we've got the same five lines of code right here. 361 00:26:25,850 --> 00:26:31,100 Let me show you how to reorganize your code and simplify this whole thing a little bit. 362 00:26:31,100 --> 00:26:36,990 Using this code it has some really great tools that will make this really really easy. 363 00:26:37,190 --> 00:26:43,400 Instead of having the same code in two different places let's refactor our code so that we have a separate 364 00:26:43,400 --> 00:26:50,930 function that's called draw and we can call that function on both the touch move and the mouse move 365 00:26:51,260 --> 00:26:51,920 the way to do this. 366 00:26:52,160 --> 00:26:58,520 The easiest way is to right click and go to refactor and then you're going to select extract to function 367 00:26:58,910 --> 00:27:00,530 in global scope. 368 00:27:00,530 --> 00:27:03,630 There's that scope word that we learned about earlier. 369 00:27:04,040 --> 00:27:05,670 It's been selected. 370 00:27:05,670 --> 00:27:10,710 And when I call my function draw and hit enter. 371 00:27:10,760 --> 00:27:17,000 So now I've got a function call here that says draw and if I scroll down then I see this draw function 372 00:27:17,330 --> 00:27:20,870 right here at the same hierarchy as clear canvas. 373 00:27:20,950 --> 00:27:25,550 It's a clear canvas has global scope and draw has global scope. 374 00:27:26,150 --> 00:27:34,490 And what this means is that I can come to my touch move and I can replace these five lines with a call 375 00:27:34,730 --> 00:27:36,560 to my draw function. 376 00:27:36,560 --> 00:27:42,590 So I think this is quite nice and makes our code quite readable if this painting set your coordinates 377 00:27:42,860 --> 00:27:48,890 and then draw scrolling to the top and collapsing of three functions you can see the structure of the 378 00:27:48,890 --> 00:27:51,280 entire file very very clearly. 379 00:27:51,410 --> 00:27:57,200 We've got our constants appear where we're sitting a few values on how to color our canvas and how thick 380 00:27:57,200 --> 00:27:58,540 the lines should be. 381 00:27:58,550 --> 00:28:04,400 Then we have some global variables and then we have three functions prepare canvas where we're setting 382 00:28:04,400 --> 00:28:07,220 the listeners and formatting the styling. 383 00:28:07,220 --> 00:28:13,460 We have the draw function which draws our lines and we have the clear canvas function which resets everything 384 00:28:13,550 --> 00:28:16,350 so that we can draw something on a blank canvas. 385 00:28:16,520 --> 00:28:20,740 So that's it for the drawing logic of the Web site. 386 00:28:20,750 --> 00:28:24,020 Hope you enjoyed the challenges and I'll see you in the next lesson.